<template>
	<!-- <eui-base-card title="招商综合视图"> -->
	<view class="menu-container">
		<eui-text type="name" value="招商综合视图" class="title"></eui-text>
		<view>
			<!-- style="margin-top: 20rpx;" -->
			<TableCard :title="title1" :whereList="whereListData1" :showCharts="true" :chartOpts="chartOption1"
				:chartStyle="chartStyle1" :column="column1" :listData="listData1" @onSearch="onSearch1">
			</TableCard>
		</view>
		<view style="margin-top: 20rpx;">
			<TableCard :title="title2" :whereList="whereListData2" :column="column2" :listData="listData2"
				@onSearch="onSearch2">
			</TableCard>
		</view>
		<view style="margin-top: 20rpx;">
			<TableCard :title="title3" :column="column3" :listData="listData3" :showCharts="true"
				:chartOpts="chartOption2" :chartStyle="chartStyle2">
			</TableCard>
		</view>
		<view style="margin-top: 20rpx;">
			<eui-base-card :title="title4">
				<view class="table-card-combox">
					<eui-combox v-for="(item, index) in dropSelect" :selectWidth="item.c_width ?? '100rpx'"
						v-model="item.c_value" valueColor="#666666" backgroundColor="#F8F8F8" :border="false"
						:candidates="item.c_options" :fieldName="item.c_col" @selectChange="onSearch3"
						:style="[index === 0 ? '' : 'margin-left:20rpx;']" :placeholder="item.c_placeholder">
					</eui-combox>
				</view>
				<eui-lime-chart v-if="chartData3.length > 0" :option="chartOption3" :chartStyle="chartStyle3" />
				<view v-else class="image-bottom">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="image-min" />
					<view class="no-data-text">暂无数据</view>
				</view>
			</eui-base-card>
		</view>
		<view style="margin-top: 20rpx;">
			<TableCard :title="title5" :whereList="whereListData4" :column="column4" :listData="listData4"
				@onSearch="onSearch4" :showCharts="true" :chartOpts="chartOption4" :chartStyle="chartStyle4">
			</TableCard>
		</view>
	</view>
	<!-- 	</eui-base-card> -->
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
import TableCard from '@/components/TableCard.vue';
import dayjs from 'dayjs';
import { getRelatedName, getDictName, getDictSelectList, getDictSelect } from '../../RdsViews/components/RelatedName.js';
import { useLoginStore } from '@/store/modules/useLoginStore';
import { useMainStore } from "@/store/modules/store";
import useService from '@/hooks/useService';
const service = useService({ prefix: "apiApi" });
const mainStore = useMainStore();
const { loginInfo } = mainStore;
const floorList = ref([]);
const colorList = ref([
	{
		value: '1',
		text: '待招商',
		color: '#02B7E6'
	},
	{
		value: '2',
		text: '已预租',
		color: '#FF9400'
	},
	{
		value: '3',
		text: '已签约',
		color: '#2789FF'
	},
	{
		value: '0',
		text: '不可招商',
		color: '#00AD60'
	}]
);
const colorList2 = ref([
	{
		value: 'A',
		text: 'A',
		color: '#02B7E6'
	},
	{
		value: 'B',
		text: 'B',
		color: '#FF9400'
	},
	{
		value: 'C',
		text: 'C',
		color: '#2789FF'
	},
	{
		value: '0',
		text: '不可招商',
		color: '#00AD60'
	}]
)
const title1 = ref('招商状态');
const title2 = ref('铺位预警');
const title3 = ref('合同到期分布');
const title4 = ref('业态配比');
const title5 = ref('品牌分布');
const column1 = ref([
	{
		title: '招商状态', // th标题
		isFixed: true, // 是否固定
		key: 'c_merchant', // 对应字段，
		align: 'left',
		width: 2, // 宽度 width * 100 rpx,
		slot: 'c_merchant',
		slotInfo: {
			type: 'dotText',
			colorList: [{
				value: '1', text: '待招商', color: '#02B7E6'
			}, {
				value: '2', text: '已预租', color: '#FF9400'
			}, {
				value: '3', text: '已签约', color: '#2789FF'
			}, {
				value: '0', text: '不可招商', color: '#00AD60'
			}]
		}
	},
	{
		title: '数量', // th标题
		isFixed: false, // 是否固定
		key: 'c_count', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
	{
		title: '数量占比(%)', // th标题
		isFixed: false, // 是否固定
		key: 'c_percent_count', // 对应字段
		align: 'right',
		width: 2,
		//slot: 'c' // 插槽名
	},
	{
		title: '经营面积', // th标题
		isFixed: false, // 是否固定
		key: 'c_use_area',
		align: 'right',
		width: 1.6,
	},
	{
		title: '面积占比(%)', // th标题
		isFixed: false, // 是否固定
		key: 'c_percent_area',
		align: 'right',
		width: 2,
	}
]);
//铺位预警
const column2 = ref([
	{
		title: '楼层', // th标题
		isFixed: true, // 是否固定
		key: 'c_floor_name', // 对应字段，
		align: 'left',
		width: 1.2, // 宽度 width * 100 rpx
	},
	{
		title: '铺位', // th标题
		isFixed: false, // 是否固定
		key: 'c_counter_name', // 对应字段
		align: 'left',
		width: 2,
		//slot: 'b' // 插槽名
	},
	{
		title: '经营面积', // th标题
		isFixed: false, // 是否固定
		key: 'c_area',
		align: 'right',
		width: 1.6,
	},
	{
		title: '运营', // th标题
		isFixed: false, // 是否固定
		key: 'c_operate_status', // 对应字段
		align: 'left',
		width: 1.4,
		//slot: 'c' // 插槽名
	},
	{
		title: '到期日', // th标题
		isFixed: false, // 是否固定
		key: 'c_expire_date',
		align: 'left',
		width: 2.2,
	},
]);
//合同到期分布
const column3 = ref([
	{
		title: '到期时间', // th标题
		isFixed: true, // 是否固定
		key: 'c_day_diff', // 对应字段，
		align: 'left',
		width: 2.2, // 宽度 width * 100 rpx
		slot: 'c_day_diff',
		slotInfo: {
			type: 'dotText',
			colorList: [{
				value: '30天', text: '30天', color: '#02B7E6'
			}, {
				value: '60天', text: '60天', color: '#FF9400'
			}, {
				value: '90天', text: '90天', color: '#2789FF'
			}, {
				value: '90天以上', text: '90天以上', color: '#00AD60'
			}]

		}
	},
	{
		title: '数量', // th标题
		isFixed: false, // 是否固定
		key: 'c_count', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
	{
		title: '数量占比(%)', // th标题
		isFixed: false, // 是否固定
		key: 'c_percent_count', // 对应字段
		align: 'right',
		width: 2,
		//slot: 'c' // 插槽名
	},
	{
		title: '经营面积', // th标题
		isFixed: false, // 是否固定
		key: 'c_use_area',
		align: 'right',
		width: 1.6,
	},
	{
		title: '面积占比(%)', // th标题
		isFixed: false, // 是否固定
		key: 'c_percent_area',
		align: 'right',
		width: 2,
	}
])


const listData1 = ref([
	{
		c_merchant: '1',
		c_count: 0,
		c_percent_count: '0.00%',
		c_use_area: 0.00,
		c_percent_area: '0.00%'
	},
	{
		c_merchant: '2',
		c_count: 0,
		c_percent_count: '0.00%',
		c_use_area: 0.00,
		c_percent_area: '0.00%'
	},
	{
		c_merchant: '3',
		c_count: 0,
		c_percent_count: '0.00%',
		c_use_area: 0.00,
		c_percent_area: '0.00%'
	},
	{
		c_merchant: '0',
		c_count: 0,
		c_percent_count: '0%',
		c_use_area: 0.00,
		c_percent_area: '0%'
	}
]);
const listData2 = ref([]);
const listData3 = ref([]);
const listData4 = ref([]);
const chartData1 = ref([])
const chartOption1 = computed(() => {
	return {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			show: true,
			orient: 'vertical',
			right: '15',
			top: 'center', // 设置图例的垂直位置在顶部
			icon: 'circle', // 设置图例的形状为圆形
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 20,
			textStyle: {
				fontSize: 13,
				lineHeight: 18,
				rich: {
					A: {
						color: '#666666',
						fontSize: 13,
						align: 'left',
						fontWeight: 400,
						width: 54
					},
					B: {
						color: '#000000',
						align: 'right',
						fontSize: 15,
						fontWeight: 600,
						width: 50
					}
				}
			},

			formatter: function (name) {
				let text = chartData1.value.find(x => x.name === name)?.percentCount || name;
				let newText = `{A|${name}}  {B|${text}}`;
				return newText;
			},
		},
		series: [
			{
				name: '',
				type: 'pie',
				radius: ['40%', '70%'],
				center: ['30%', '50%'],
				avoidLabelOverlap: false,
				label: {
					show: true,  // 显示标签
					position: 'inside', // 将标签显示在饼图内部
					formatter: '{d}%', // 仅显示百分比
					fontSize: 12,
					color: '#000000',
					fontWeight: 'normal',
					align: 'center', // 文本居中对齐
					verticalAlign: 'middle' // 文本垂直居中对齐
				},
				emphasis: {
					label: {
						show: false,
					}
				},
				labelLine: {
					show: false
				},
				data: chartData1.value,
				itemStyle: {
					normal: {
						color: function (params) {
							return colorList.value.find(x => x.text === params.name)?.color || '#02B7E6'
						}
					}
				}
			}
		]
	}

});
const chartStyle1 = ref("height: 350rpx;background: #FFFFFF");
const chartData2 = ref([])
const chartOption2 = computed(() => {
	return {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			show: true,
			orient: 'vertical',
			right: '15',
			top: 'center', // 设置图例的垂直位置在顶部
			icon: 'circle', // 设置图例的形状为圆形
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 20,
			textStyle: {
				fontSize: 13,
				lineHeight: 18,
				rich: {
					A: {
						color: '#666666',
						fontSize: 13,
						align: 'left',
						fontWeight: 400,
						width: 54
					},
					B: {
						color: '#000000',
						align: 'right',
						fontSize: 15,
						fontWeight: 600,
						width: 52
					}
				}
			},

			formatter: function (name) {
				let text = chartData2.value.find(x => x.name === name)?.percentCount || name;
				let newText = `{A|${name}}  {B|${text}}`;
				return newText;
			},
		},
		series: [
			{
				name: '',
				type: 'pie',
				radius: ['40%', '70%'],
				center: ['30%', '50%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
				},
				emphasis: {
					label: {
						show: false,
					}
				},
				labelLine: {
					show: false
				},
				data: chartData2.value,
				itemStyle: {
					normal: {
						color: function (params) {
							let colorData = [{
								value: '30天', text: '30天', color: '#02B7E6'
							}, {
								value: '60天', text: '60天', color: '#FF9400'
							}, {
								value: '90天', text: '90天', color: '#2789FF'
							}, {
								value: '90天以上', text: '90天以上', color: '#00AD60'
							}]
							return colorData.find(x => x.text === params.name)?.color || '#02B7E6'
						}
					}
				}
			}
		]
	}
});
const chartStyle2 = ref("height: 350rpx;background: #FFFFFF");

const chartData3 = ref([])
const chart3yData = ref([]);
const chartOption3 = computed(() => {
	return {
		tooltip: {
			trigger: 'none',
		},
		legend: {
			show: false,
		},
		color: ['#7863FF', '#0BCCCC', '#02B7E6', '#D480FF', '#2789FF', '#FF9400', '#00AD60'],
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			top: '3%',
			containLabel: true
		},
		xAxis: {
			show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
			axisTick: {
				show: false // 不显示坐标轴刻度线
			},
			axisLine: {
				show: false, // 不显示坐标轴线
			},
			axisLabel: {
				show: false, // 不显示坐标轴上的文字
			},
			splitLine: {
				show: false // 不显示网格线
			},
			type: 'value'
		},
		yAxis: {
			type: 'category',
			axisTick: {
				show: false // 不显示坐标轴刻度线
			},
			axisLine: {
				show: false, // 不显示坐标轴线
			},
			data: chart3yData.value
		},
		series: chartData3.value,
	}
});
const chartStyle3 = ref("height: 500rpx;background: #FFFFFF");
const chartData4 = ref([])
const chartOption4 = computed(() => {
	return {
		tooltip: {
			trigger: 'item'
		},
		legend: {
			show: true,
			orient: 'vertical',
			right: '15',
			top: 'center', // 设置图例的垂直位置在顶部
			icon: 'circle', // 设置图例的形状为圆形
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 20,
			textStyle: {
				lineHeight: 18,
				rich: {
					A: {
						color: '#666666',
						fontSize: 13,
						align: 'left',
						fontWeight: 400,
						width: 40
					},
					B: {
						color: '#000000',
						align: 'right',
						fontSize: 15,
						fontWeight: 600,
						width: 30
					}
				}
			},

			formatter: function (name) {
				let text = chartData4.value.find(x => x.name === name)?.percentCount || name;
				let newText = `{A|${name}}` + `{B|${text}}`;
				return newText;
			},
		},
		series: [
			{
				name: '',
				type: 'pie',
				radius: ['40%', '70%'],
				center: ['30%', '50%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
				},
				emphasis: {
					label: {
						show: false,
					}
				},
				labelLine: {
					show: false
				},
				data: chartData4.value,
				itemStyle: {
					normal: {
						color: function (params) {
							return colorList2.value.find(x => x.text === params.name)?.color || '#02B7E6'
						}
					}
				}
			}
		]
	}

});
const chartStyle4 = ref("height: 350rpx;background: #FFFFFF");

const whereListData1 = ref([
	{
		c_value: '',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'merchantState',
		c_width: '130rpx',
		c_is_search: true,
		c_placeholder: '招商状态',
		c_options: getDictSelect({ dataItem: '铺位招商状态', enableNullRow: true }),
		c_showSelector: false
	},
	{
		c_value: loginInfo.sUserStore,
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'storeId',
		c_width: '',
		c_is_search: false,
		c_placeholder: '机构',
		c_options: [],
		c_showSelector: false
	}
]);
const whereListData2 = ref([
	{
		c_value: loginInfo.sUserStore,
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'storeId',
		c_width: '',
		c_is_search: false,
		c_placeholder: '机构',
		c_options: [],
		c_showSelector: false
	}
]);
const whereListData3 = ref([
	{
		c_value: loginInfo.sUserStore,
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'storeId',
		c_width: '',
		c_is_search: false,
		c_placeholder: '机构',
		c_options: [],
		c_showSelector: false
	},
	{
		c_value: '1',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'isContractOrGuiHua',
		c_width: '110rpx',
		c_is_search: true,
		c_placeholder: '',
		c_options: [{ text: '按规划', value: '1' }, { text: '按合同', value: '2' }],
		c_showSelector: false
	}
]);
const whereListData4 = ref([
	{
		c_value: loginInfo.sUserStore,
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'storeId',
		c_width: '',
		c_is_search: false,
		c_placeholder: '机构',
		c_options: [],
		c_showSelector: false
	},
	{
		c_value: '1',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'type',
		c_width: '140rpx',
		c_is_search: true,
		c_placeholder: '',
		c_options: [{ value: '1', text: '按重要性' }, { value: '2', text: '按业态' }, { value: '3', text: '按招商定位' }],
		c_showSelector: false
	}
]);
//品牌分布
const column4 = computed(() => {
	let type = whereListData4.value.find(x => x.c_col == 'type')?.c_value || '1'
	let column = [];
	switch (type) {
		case "1":
			column.push({
				title: '等级', // th标题
				isFixed: true, // 是否固定
				key: 'c_type_name', // 对应字段，
				align: 'left',
				width: 1.6, // 宽度 width * 100 rpx
				slot: 'c_type_name',
				slotInfo: {
					type: 'dotText',
					colorList: [{
						value: 'A', text: 'A', color: '#02B7E6'
					}, {
						value: 'B', text: 'B', color: '#FF9400'
					}, {
						value: 'C', text: 'C', color: '#2789FF'
					}, {
						value: 'D', text: 'D', color: '#00AD60'
					}]

				}
			});
			break
		case "2":
			column.push({
				title: '业态', // th标题
				isFixed: true, // 是否固定
				key: 'c_type_name', // 对应字段，
				align: 'left',
				width: 1.6, // 宽度 width * 100 rpx
			});
			break;
		case "3":
			column.push({
				title: '招商定位', // th标题
				isFixed: true, // 是否固定
				key: 'c_type_name', // 对应字段，
				align: 'left',
				width: 1.6, // 宽度 width * 100 rpx
				slot: 'c_type_name',
				slotInfo: {
					type: 'selectText',
					selectList: getDictSelectList('招商定位')
				}
			});
			break;
	}
	column.push({
		title: '数量', // th标题
		isFixed: false, // 是否固定
		key: 'c_count', // 对应字段
		align: 'right',
		width: 1.2,
		//slot: 'b' // 插槽名
	},
		{
			title: '数量占比(%)', // th标题
			isFixed: false, // 是否固定
			key: 'c_percent_count', // 对应字段
			align: 'right',
			width: 2,
			//slot: 'c' // 插槽名
		},
		{
			title: '经营面积', // th标题
			isFixed: false, // 是否固定
			key: 'c_use_area',
			align: 'right',
			width: 1.6,
		},
		{
			title: '面积占比(%)', // th标题
			isFixed: false, // 是否固定
			key: 'c_percent_area',
			align: 'right',
			width: 2,
		})
	return column;
})

const dropSelect = computed(() => {
	return whereListData3.value.filter(x => x.c_is_search === true);
});
///楼层信息
const GetStructures = async () => {
	let req = {
		storeId: loginInfo.sUserStore
	}
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通招商综合视图', 'GetStructures', req);
	uni.hideLoading();
	console.log('GetStructures', res)
	if (res) {
		floorList.value = res.map(x => {
			return {
				text: x.floorName,
				value: x.floor
			}
		})
		floorList.value.unshift({ text: '', value: '' });
	}
}

onLoad(async () => {
	await GetStructures();
	whereListData1.value.push({
		c_value: '',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'floor',
		c_width: '80rpx',
		c_is_search: true,
		c_placeholder: '楼层',
		c_options: floorList.value,
		c_showSelector: false
	});
	whereListData2.value.push({
		c_value: '',
		c_oper: "等于",
		c_logic: "而且",
		c_col: 'floor',
		c_width: '80rpx',
		c_is_search: true,
		c_placeholder: '楼层',
		c_options: floorList.value,
		c_showSelector: false
	})
	await GetCounterStatusData();
	await GetCounterWarnData();
	await GetContractExpireGroup();
	await GetBusinessData();
	await GetBrandStoreList();
})

const onSearch1 = async (whereList: any) => {
	whereListData1.value = whereList;
	await GetCounterStatusData();
}
const onSearch2 = async (whereList: any) => {
	whereListData2.value = whereList;
	await GetCounterWarnData();
}
const onSearch3 = async (args: any) => {
	whereListData3.value = whereListData3.value.map(x => {
		return {
			c_col: x.c_col,
			c_oper: x.c_oper,
			c_value: x.c_col === args.fieldName ? args.selectValue : x.c_value,
			c_logic: x.c_logic,
			c_width: x.c_width,
			c_options: x.c_options,
			c_is_search: x.c_is_search,
			c_placeholder: x?.c_placeholder,
			c_showSelector: x.c_col === args.fieldName ? true : false,
		}
	})
	await GetBusinessData();
}
const onSearch4 = async (whereList: any) => {
	whereListData4.value = whereList;
	await GetBrandStoreList();
}
///铺位状态
const GetCounterStatusData = async () => {
	let whereList = getWhereListReq(whereListData1.value);
	let req = {
		storeId: loginInfo.sUserStore,
		floor: whereList.find(x => x.c_col == 'floor')?.c_value || '',
		merchantState: whereList.find(x => x.c_col == 'merchantState')?.c_value || '',
		operationState: '',
	}
	listData1.value = [
		{
			c_merchant: '1',
			c_count: 0,
			c_percent_count: '0%',
			c_use_area: 0,
			c_percent_area: '0%'
		},
		{
			c_merchant: '2',
			c_count: 0,
			c_percent_count: '0%',
			c_use_area: 0,
			c_percent_area: '0%'
		},
		{
			c_merchant: '3',
			c_count: 0,
			c_percent_count: '0%',
			c_use_area: 0,
			c_percent_area: '0%'
		},
		{
			c_merchant: '0',
			c_count: 0,
			c_percent_count: '0%',
			c_use_area: 0,
			c_percent_area: '0%'
		},
	];
	chartData1.value = {};
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通招商综合视图', 'GetCounterStatusData', req);
	uni.hideLoading();
	if (res) {
		listData1.value = listData1.value.map(x => {
			let itemList = res.filter(y => y.c_merchant === x.c_merchant);
			return {
				c_merchant: x.c_merchant,
				c_count: itemList.reduce((m, item) => { return m + item.c_count; }, 0),
				c_percent_count: itemList.reduce((m, item) => { return m + item.c_percent_count; }, 0).toFixed(2),
				c_use_area: itemList.reduce((m, item) => { return m + item.c_use_area; }, 0).toFixed(2),
				c_percent_area: itemList.reduce((m, item) => { return m + item.c_percent_area; }, 0).toFixed(2)
			}
		})
		chartData1.value = listData1.value.map(x => {
			return {
				name: colorList.value.find(y => y.value == x.c_merchant)?.text,
				value: x.c_count,
				percentCount: x.c_percent_count + '%',
				labelText: colorList.value.find(y => y.value == x.c_merchant)?.text + '   ' + x.c_percent_count + '%'
			}
		})
	}
}
///铺位预警
const GetCounterWarnData = async () => {
	let whereList = getWhereListReq(whereListData2.value);
	const req = {
		PageSize: 10,
		WhereList: [{
			c_col: "c_store_id",
			c_oper: "等于",
			c_value: loginInfo.sUserStore,//取当前登录机构
			c_logic: "而且"
		},
		{
			c_col: "c_arrived_month",
			c_oper: "等于",
			c_value: 3,  //预警日期   默认90天
			c_logic: "而且"
		},
		{
			c_col: "c_floor_no",
			c_oper: "等于",
			c_value: whereList.find(x => x.c_col == 'floor')?.c_value || '',
			c_logic: "而且"
		}
		],
	};
	listData2.value = [];
	uni.showLoading("查询中...");
	const res = await service.request('管易通铺位预警', 'GetCounterWarnData', req);
	uni.hideLoading();
	if (res?.ReturnObject.length > 0) {
		listData2.value = res?.ReturnObject.map(x => {
			return {
				c_floor_name: x.c_floor_name,
				c_counter_name: x.c_name,
				c_area: x.c_use_area.toFixed(2),
				c_operate_status: x.c_operation_name,
				c_expire_date: dayjs(x.c_en_dt).isAfter(new Date()) ? dayjs(x.c_en_dt).format('YYYY-MM-DD') : '已到期'
			}
		})
	}
	title2.value = "铺位预警" + " [" + listData2.value.length + "]";
}

///合同到期分布
const GetContractExpireGroup = async () => {
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通招商综合视图', 'GetContractExpireGroup', loginInfo.sUserStore);
	uni.hideLoading();
	console.log('GetContractExpireGroup', res)
	if (res) {
		listData3.value = res.map(x => {
			return {
				...x,
				c_use_area: x.c_use_area.toFixed(2),
			}
		})
		chartData2.value = res.map(x => {
			return {
				name: x.c_day_diff,
				value: x.c_count,
				percentCount: x.c_percent_count + '%',
				labelText: x.c_day_diff + ' ' + x.c_percent_count + '%'
			}
		})
	}
}

///业态配比
const GetBusinessData = async () => {
	let whereList = getWhereListReq(whereListData4.value);
	console.log('loginInfo', loginInfo)
	let req = {
		storeId: loginInfo.sUserStore,
		// tenantId: '8',
		isContractOrGuiHua: whereList.find(x => x.c_col == 'isContractOrGuiHua')?.c_value || '1'
	}
	chartData3.value = [];
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通招商综合视图', 'GetBusinessData', req);
	uni.hideLoading();
	if (res) {
		const floorNameData = res.map(x => { return x.c_floorName });
		const floorNameList = new Set(floorNameData);
		chart3yData.value = [...floorNameList];
		const bcnameData = res.map(x => { return x.c_bcname });
		const bcnameList = [...new Set(bcnameData)];
		for (let i = 0; i < bcnameList.length; i++) {
			let dataList = []
			for (let j = 0; j < chart3yData.value.length; j++) {
				let floorList = res.filter(z => z.c_floorName === chart3yData.value[j])
				let itemList = res.filter(z => z.c_bcname === bcnameList[i] && z.c_floorName === chart3yData.value[j]) || [];
				let floorCount = floorList.length > 0 ? floorList.reduce((m, item) => { return m + item.c_bccount; }, 0) : 0;
				let bcnameCount = itemList.length > 0 ? itemList.reduce((m, item) => { return m + item.c_bccount; }, 0) : 0;
				if (itemList.length > 0) {
					let c_percent = floorCount == 0 ? 0 : (bcnameCount / floorCount * 100).toFixed(2);

					dataList.push(c_percent)
				}
				else {
					dataList.push(undefined);
				}
			}
			chartData3.value.push({
				name: bcnameList[i],
				type: 'bar',
				stack: 'total',
				emphasis: {
					focus: 'none',
					disabled: true,
				},
				data: dataList,
				barWidth: '100%',
				label: {
					show: true, // 显示标签
					position: ['50%', '50%'], // 标签位置
					// 可以通过 formatter 自定义标签格式
					formatter: bcnameList[i] + '\n' + '{c}' + '%', // {c} 表示数据值
					color: "#FFFFFF",
					lineHeight: 12,
					fontSize: 12,
					align: 'center',
					verticalAlign: 'middle'
				}
			})
		}
	}
}
///品牌分布
const GetBrandStoreList = async () => {
	listData4.value = [];
	let whereList = getWhereListReq(whereListData4.value);
	let req = {
		storeId: loginInfo.sUserStore,
		type: whereList.find(x => x.c_col == 'type')?.c_value || '1'
	}
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通招商综合视图', 'GetBrandStoreList', req);
	uni.hideLoading();
	if (res) {
		listData4.value = res.map(x => {
			let c_type_name = "";
			switch (req.type) {
				case "1":
					c_type_name = x.c_abc;
					break;
				case "2":
					c_type_name = getRelatedName('rdsGdsclasses', x.c_bccode) || '';
					break;
				case "3":
					c_type_name = x.c_merchant_position;
					break;
			}
			return {
				...x,
				c_percent_count: x.c_percent_count.toFixed(2),
				c_percent_area: x.c_percent_area.toFixed(2),
				c_use_area: x.c_use_area.toFixed(2),
				c_type_name: c_type_name
			}
		})
		let selectData = getDictSelectList('招商定位')
		chartData4.value = listData4.value.map(x => {
			return {
				name: req.type != "3" ? x.c_type_name : selectData.find(y => y.value === x.c_type_name)?.text || '',
				value: x.c_count,
				percentCount: x.c_percent_count + '%',
				labelText: (req.type != "3" ? x.c_type_name : selectData.find(y => y.value === x.c_type_name)?.text || '') + '   ' + x.c_percent_count + '%'
			}
		})
	}
}
const getWhereListReq = (whereList: any) => {
	return whereList.map(x => {
		return {
			c_col: x.c_col,
			c_oper: x.c_oper,
			c_value: x.c_value,
			c_logic: x.c_logic
		}
	});
}
</script>

<style lang="scss" scoped>
.menu-container {
	padding-top: 28rpx;
	box-align: border-box;
	background-color: #fff;
	border-radius: 20rpx;
	box-sizing: border-box;
	overflow: hidden;
}

.table-card-combox {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	padding: 20rpx 16rpx 28rpx 0rpx;
}

.title {
	margin-left: 28rpx;
	// margin-bottom: 28rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 32rpx;
	color: #000000;
}

.image-min {
	width: 100%;
	height: 150rpx;
	opacity: 0.6;
	margin-top: -20rpx;
}

.no-data-text {
	text-align: center;
	color: #cccccc;
	font-size: 24rpx;
	margin-top: -20rpx;
}

.image-bottom {
	margin-bottom: 40rpx;
}
</style>